<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login</title>
    <style>
      body {
        margin: 0;
        background: #eee;
      }
      #header {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        padding: 0 20px;
        box-sizing: border-box;
        top: 0;
        background: white;
        z-index: 99;
      }
      img {
        width: 100px;
        height: auto;
      }
      main {
        padding-top: 70px;
      }
      #features {
        text-align: center;
      }
      #form {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      #email {
        width: 300px;
        height: 30px;
      }
      #submit {
        margin-top: 15px;
        /* height: 20px; */
        width: 90px;
        /* line-height: 20px; */
        padding: 0px;
        font-size: 16px;
      }
      #howtowork{
          text-align: center;
          margin-top: 70px;
      }
      #price{
          margin-top: 700px;
          text-align: center;
      }
      @media (max-width: 500px) {
        img {
          max-width: 50px;
          min-width: 50px;
        }
      }
    </style>
  </head>
  <body>
    <header id="header">
      <img
        src="https://www.baidu.com/img/flexible/logo/pc/result.png"
        alt="Login Log"
        id="header-img"
      />
      <nav id="nav-bar">
        <a href="#features" class="nav-link">特性</a>
        <a href="#howtowork" class="nav-link">如何工作</a>
        <a href="#price" class="nav-link">价格</a>
      </nav>
    </header>
    <main>
      <section id="features">
        <h1>Handcrafted, home-made masterpieces</h1>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
          <input
            type="email"
            placeholder="请输入您的邮箱进行登录"
            id="email"
            required
            name="email"
          />
          <input type="submit" id="submit" value="提交" />
        </form>
      </section>
      <section id="howtowork">
        <p>
          Premium Materials Our trombones use the shiniest brass which is
          sourced locally. This will increase the longevity of your purchase.
          <p>
            Fast Shipping We make sure you recieve your trombone as soon as we
            have finished making it. We also provide free returns if you are not
            satisfied.
          </p>
          <p>
            Quality Assurance For every purchase you make, we will ensure there
            are no damages or faults and we will check and test the pitch of
            your instrument.
          </p>
        </p>
        <video
          src="https://www.w3cschool.cn/statics/demosource/movie.mp4"
          id="video"
          controls
          autoplay
        ></video>
      </section>
      <section id="price">
          <h1>价格</h1>
          <div>
              <div class="box">700</div>
              <div class="box">800</div>
              <div class="box">900</div>
          </div>
      </section>
    </main>
  </body>
  <script
    src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"
    async
  ></script>
</html>
